<template>
  <div>
    <div class="userCenter">
      <div class="uContent">
        <p>基本资料</p>
        <el-form ref="form" :model="form" :rules="rules"  label-width="80px">
          <el-form-item label="别名：" prop="anotherName">
            <el-input v-model="form.anotherName"></el-input>
          </el-form-item>
          <el-form-item label="性别：" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="Y">男</el-radio>
              <el-radio label="N">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="qq：" prop="qq">
            <el-input v-model="form.qq"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="电话：" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { findById,updateUser } from "@/js/api/home";
export default {
  name:'userCenter',
  data(){
    return {
      form:{
        anotherName:"",
        gender:"",
        qq:"",
        email:"",
        phone:""
      },
      rules: {
        anotherName: [
          { required: true, message: "不允许为空", trigger: "blur" },
        ],
        gender: [
          { required: true, message: "不允许为空", trigger: "blur" },
        ],
        qq: [
          { required: true, message: "不允许为空", trigger: "blur" },
        ],
        email: [
          { required: true, message: "不允许为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "不允许为空", trigger: "blur" },
        ],
      },
    }
  },
  created(){
    this.loadList()
  },
  methods:{
    onSubmit(){
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.id = window.localStorage.userId
          updateUser(this.form).then(response=>{
            if(response.data){
              this.utils.tips.success("修改成功，刷新后生效")
              window.localStorage.setItem("userName",this.form.anotherName)
            }else{
              this.utils.tips.error("修改失败")
            }
          })
        }
      })
    },
    loadList(){
      findById(window.localStorage.userId).then(response=>{
        if(response.data.state){
          this.form.anotherName = response.data.data.anotherName
          this.form.gender = response.data.data.gender
          this.form.qq = response.data.data.qq
          this.form.email = response.data.data.email
          this.form.phone = response.data.data.phone
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
.userCenter{
  .uContent{
    margin: 20px;
    padding:0 30px;
    border: 1px solid #ccc;
  }
}
</style>